<template>
  <div>
    <div id="printId" ref="printMe">
      <div class="printTable" style="page-break-after:always; margin-bottom: 20px;" v-for="(item, index) in tableHeadList" :key="index">
        <div class="tableHeadUl">
          <div class="title">
            <img :id="'barCode' + index" ref="barCode">
            <b class="b"> {{ exitWarehouseTitle }} </b>
          </div>
          <ul style="left: 0%;">
            <li v-if="exitWarehouseCustomer == ''"><b>客户名称</b>：{{ item.exitWarehouseCustomer }}</li>
            <li v-else><b>客户名称</b>：{{ exitWarehouseCustomer }}</li>
            <!--li><b>收货人</b>：{{ item.receiveGoodsPerson }}</li-->
            <li><b>车牌号</b>：{{ item.exitWarehouseVehicle }}</li>
            <li></li>
            <!--li><b>司机姓名</b>：{{ item.exitWarehouseDriver }}</li-->
          </ul>
          <!--ul class="ul">
            <li class="li1"><b>收货电话</b>：{{ item.receiveGoodsMobile }}</li>
            <li class="li2"><b>收货地址</b>：{{ item.receiveGoodsAddress }}</li>
          </ul-->
        </div>
        <!--b> 海泰仓运科技有限公司汽运单</b>
        <b> 海泰仓运科技有限公司汽运单</b-->
        <!--table style="word-break:break-all;word-wrap:break-all;" class="table">
          <tr>
          <td >代理：精钢经代理：精钢经代理：精钢经代理：精钢经代理：精钢经代理：精钢经代理：精钢经</td>
          <td >提货单号：435645657</td>
          </tr>
          <tr>
          <td >发货客户</td>
          <td >收货客户</td>
          <td >提货车号</td>
          </tr>
        </table-->      

        <table style="word-break:break-all;word-wrap:break-all;" class="table">
          <tbody>
            <tr>
              <td v-if="printBundleNumber == true" class="detail" style="min-width:75px">板序号</td>
              <td class="detail" style="min-width:75px">类型</td>
              <td class="detail" style="min-width:75px">材质</td>
              <td class="detail" style="min-width:75px">规格</td>
              <td class="detail" style="min-width:75px">计重方式</td>
              <td v-if="printWeight == true" class="detail" style="min-width:75px">重量(吨)</td>
              <!--td v-if="printTheoryWeight == true" class="detail" style="min-width:75px">理重(吨)</td-->
              <td class="detail" style="min-width:75px">合同号</td>
              <!--td class="detail" style="min-width:75px">合约号</td-->
              <td class="detail" style="min-width:75px">片数</td>

            </tr>
            <tr v-for="(itemGoods, indexData) in tableDataList" :key="indexData">
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber && printBundleNumber == true">{{ itemGoods.bundleNumber }}</td>
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.goodsType }}</td>
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.steelGrade }}</td>
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.specification }}</td>
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.weightMode }}</td>
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber && printWeight == true">{{ itemGoods.weight }}</td>
              <!--td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber && printTheoryWeight == true">{{ itemGoods.theoryWeight }}</td-->
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.contractNumber }}</td>
              <!--td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.agreementNumber }}</td-->
              <td v-if="itemGoods.exitWarehouseNumber==item.exitWarehouseNumber">{{ itemGoods.numberOfPiece }}</td>
            </tr>
              <td v-if="printBundleNumber == true">合计</td>
              <td v-if="printBundleNumber == true">&nbsp;</td> <td v-else>合计</td>
              <td >&nbsp;</td>
              <td >&nbsp;</td>
              <td >&nbsp;</td>
              <td v-if="printWeight == true" >{{ item.weight }}</td>
              <!--td v-if="printTheoryWeight == true" >{{ item.theoryWeight }}</td-->
              <td ></td>
              <!--td >&nbsp;</td-->
              <td >{{ item.numberOfPiece }}</td>
          </tbody>
        </table>      
        <div class="tableFootUI">
          <ul>
            <li><b>打印时间</b>：{{ dateNow }}</li>
            <!--li><b>共计</b>：{{ item.weight }}吨&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<span >{{ item.theoryWeight }}吨</span>/&nbsp;&nbsp;&nbsp;<span >{{ item.numberOfPiece }}件</span></li-->
            <li><b>制单人</b>：{{ item.createBy }}</li>
            <li><b>司机姓名</b>：<span style="color:black;">&nbsp;{{ item.exitWarehouseDriver }}&nbsp;</span></li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
          </ul>
        </div>
        <div class="tableFootUI">
          <!--span v-if="!item.remark">
          </span>
          <span v-else>
            <b>备注信息</b>：{{ item.remark }}
          </span-->
          <span v-if="exitWarehouseRemark">
            <b>备注信息</b>：{{ exitWarehouseRemark }}
          </span>
        </div>

      </div>
    </div>
    <div class="button">
      <el-button type="success" icon="el-icon-edit" size="mini" @click="handleTitle">修正</el-button>
      <el-button type="primary" icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
    </div>
    <!-- 添加或修改出库单据对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="出库标题" prop="exitTitle">
          <el-input v-model="form.exitTitle" placeholder="请输入出库单标题" />
        </el-form-item>
        <el-form-item label="出库客户" prop="exitCustomer">
          <el-input v-model="form.exitCustomer" placeholder="请输入出库客户" />
        </el-form-item>
        <el-form-item label="板 序 号">
          <el-radio-group v-model="form.exitBundleNumber">
            <el-radio
              v-for="dict in printOptions"
              :key="dict.key"
              :label="dict.key"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="重量(吨)">
          <el-radio-group v-model="form.exitWeight">
            <el-radio
              v-for="dict in printOptions"
              :key="dict.key"
              :label="dict.key"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--el-form-item label="理重(吨)">
          <el-radio-group v-model="form.exitTheoryWeight">
            <el-radio
              v-for="dict in printOptions"
              :key="dict.key"
              :label="dict.key"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item-->
        <el-form-item label="备注" prop="exitRemark">
          <el-input v-model="form.exitRemark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'
import { getGoodByExitNumber } from "@/api/goods/good";

export default {
  name: "Print",
  data() {
    return {
      dateNow: '',
      id: '',
      name: '',
      tableDataList: [], // 表格
      tableHeadList: [], // 信息
      tableFoot: [], // 信息
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        exitTitle: '海泰库出库单',
        exitCustomer: '',
        exitBundleNumber: true,
        exitWeight: true,
        exitTheoryWeight: true,
        exitRemark: '',
      },
      // 出库单标题
      exitWarehouseTitle: '海泰库出库单',
      // 出库客户
      exitWarehouseCustomer: '',
      // 打印版序号
      printBundleNumber: true,
      // 打印磅重
      printWeight: true,
      // 打印理重
      printTheoryWeight: true,
      // 列信息
      printOptions: [
        { key: true, label: `打印` },
        { key: false, label: `不打印` },
       ],
      // 备注信息
      exitWarehouseRemark: null,
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.tableHeadList = this.$route.query.list;
    this.getData();
    this.dateNow = this.getDateTime(); //new Date().getTime();
  },
  mounted() {
//    console.log('this.id', this.id);
//    console.log('this.name', this.name);
    let options = {
      format: 'CODE128', //格式
      width: 2, // 条之间宽度
      height: 50, // 高度
      fontSize: 20, // 文本大小
      fontOptions: 'bold', // 字加粗体
      displayValue: true, // 在条形码下方显示文字
      lineColor: '#000', // 线条颜色
      margin: 6 // 条形码周围的空白区域
    }
    this.tableHeadList.forEach((item, index) => {
      let img = this.$refs.barCode[index];
//      console.log('img', img);
      JsBarcode(img, item.exitWarehouseNumber, options);
    })
//    console.log(this.tableHeadList)    
  },
  destroyed() {
//    console.log('destroyed');
    this.tableDataList = [];
    this.tableHeadList = [];
  },
  methods: {
    getDateTime() {
      let date = new Date()
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
    handlePrint() {
//      console.log('handlePrint');
      this.$print(this.$refs.printMe);
    },
    getData(){
      let totalWeight = 0.0;
      let totalPiece =0;
      this.tableDataList = [];
      this.tableHeadList.forEach((item) => {
//        console.log('forEach item', item );
        getGoodByExitNumber(item.exitWarehouseNumber).then(response => {
          let data = JSON.parse(JSON.stringify(response.data));
          data.map(item => {this.tableDataList.push(item)})
        });
      })
//      console.log('this.tableDataList', this.tableDataList)
//      console.log(this.tableHeadList)
    },
    handleTitle() {
      this.open = true;
      this.title = "修改出库单打印项";
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 提交按钮 */
    submitForm() {
      //console.log('submitForm', this.form);
      this.exitWarehouseTitle = this.form.exitTitle;
      this.exitWarehouseCustomer = this.form.exitCustomer;
      this.printBundleNumber = this.form.exitBundleNumber;
      this.printWeight = this.form.exitWeight;
      this.printTheoryWeight = this.form.exitTheoryWeight;
      this.exitWarehouseRemark = this.form.exitRemark;
      this.open = false;
    },
  }

};
</script>
<style scoped lang='less'>

#printId {
  font-size: 16px;
  position: relative;
  padding: 10px;
  // margin-bottom: 10px;
  box-sizing: border-box;
  //   height: 500px;
  width: 100%;
}
.printTable {
  width: 900px;
  margin-bottom: 20px;
}
.tableHeadUl {
  width: 100%;
  // margin-top: 5px;
  .title {
    display: flex;
    height: 70px;
    position: relative;
    img {
      float: left;
    }
    .b {
      position: absolute;
      left: 40%;
      font-size: 22px;
      margin-top: 15px;
    }
/*
    .c {
      position: absolute;
      left: 47%;

      font-size: 16px;
      margin-top: 40px;
    }
    ul{
     display: flex;

    }

    #barCode {
      float: left;
    }*/
  }

  ul {
    width: 100%;
    display: flex;
    align-items: left;
    padding: 0 !important;
    justify-content: space-between;
    li {
      list-style: none;
    }
  }
/**/
}
.ul{
  .li1{
    width: 23%;
  }
  .li2{
    width: 57%;
  }
}
.tableFootUI {
  bottom: 10px;
  width: 100%;
  ul {
    width: 100%;
    display: flex;
//    margin: 10 !important;
    padding: 0 !important;
    justify-content: space-between;
    li {
      list-style: none;
    }
  }
}
.button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
table,
th,
td {
  border: 1px solid blue;
  font-size: 16px;
}
table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}
table {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 16px;
  td {
    // width: 17%;
    // padding: 4px 4px;
    text-align: center;
    height: 24px;
  }

  .detail {
    font-weight: 700;
    //font-size: 16px;
  }
}
</style>